<template>
	<view class="store_page">
		<u-navbar fixed placeholder bgColor="#fff">
			<template #left>
				<text class="nav_title">我的商铺</text>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
      <u-sticky>
        <u-tabs
          :list="tabList"
          :scrollable="false"
          :current="activeTab"
          lineColor="#148B81"
          :lineWidth="40"
          :lineHeight="4"
          :inactiveStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#636363',
           }"
          :activeStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#333',
          }"
          @click="(item) => changeTab(item.index)"
        >
        </u-tabs>
      </u-sticky>
      <view class="tab_box">
        <u-empty
          v-if="!shopList.length"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
        >
        </u-empty>
        <view v-else class="store_box" v-for="shop in shopList" :key="shop.id">
          <view class="info_box">
            <view class="line_1">
              <u-avatar class="avatar" shape="square" size="66" :src="shop.doorImg"></u-avatar>
              <view class="info">
                <view class="store_name">{{shop.name}}</view>
                <view class="tags">
                  <view v-if="shop.status === '0'" class="tag active">正常营业</view>
                  <view v-else-if="shop.status === '1'" class="tag stop">暂停营业</view>
                  <view v-else-if="shop.status === '2'" class="tag invalid">店铺撤场</view>
                </view>
              </view>
            </view>
            <view class="line_2">
              <text class="label">归属景区：</text>
              <text class="desc">{{shop.jingquName}}</text>
            </view>
            <view class="line_3">
              <text class="label">店铺地址：</text>
              <text class="desc">{{shop.address}}</text>
            </view>
          </view>
          <u-divider></u-divider>
          <view class="btn_box">
            <view class="btn_item delete" @click="shopDel(shop.id)">删除</view>
            <view class="btn_item edit" @click="shopEdit(shop.id)">编辑</view>
            <view class="btn_item detail" @click="lookDetail(shop.id)">详情</view>
          </view>
        </view>
      </view>
		</scroll-view>
	</view>
</template>

<script>

import {getQiyeList, qiyeDel} from "@/api/shop";

  export default {
    onLoad(option) {
      if (option.activeTab) {
        this.activeTab = Number(option.activeTab)
      }
      this.getQiyeList(this.auditStatus)
    },
		data() {
			return {
				tabList: [
					{ name: '已认证' },
					{ name: '审核中' },
					{ name: '被驳回' }
				],
				activeTab: 0,
        shopList: []
			}
		},
    computed: {
      navBarHeight () {
        const platform = uni.getSystemInfoSync().platform
        const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
        let navHeight = 0
        if (['ios', 'devtools'].includes(platform)) {
          navHeight = 44
        } else {
          navHeight = 48
        }
        return navHeight + statusBarHeight
      },
      auditStatus () {
        if (this.activeTab === 0) return 1
        if (this.activeTab === 1) return 0
        if (this.activeTab === 2) return 2
      }
    },
		methods: {
      /**
       * @param auditStatus
       * 0: 待审批 1：已通过 2：已驳回
       * @returns {Promise<void>}
       */
      async getQiyeList (auditStatus) {
        const { code, data, msg } = await getQiyeList({
          auditStatus
        })
        if (code === 200) {
          this.shopList = data.rows || []
        } else {
          this.$modal.msgError(msg)
        }
      },
			changeTab (index) {
				this.activeTab = index
        this.getQiyeList(this.auditStatus)
			},
      shopDel (shopId) {
        qiyeDel({
          id: shopId
        }).then(res => {
          const { code, msg } = res
          if (code === 200) {
            this.$modal.msgSuccess('删除成功')
            this.shopList = this.shopList.filter(shop => shop.id !== shopId)
          } else {
            this.$modal.msgError(msg)
          }
        }).catch(() => {})
      },
      shopEdit (shopId) {
        uni.navigateTo({
          url: '/pages/shop/shopAdd?shopId=' + shopId
        })
      },
      lookDetail (shopId) {
        uni.navigateTo({
          url: '/pages/shop/shopDetail?shopId=' + shopId
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.store_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;
		.nav_title {
			font-size: 36rpx;
			font-weight: 400;
			color: #000000;
		}
		.content {
			box-sizing: border-box;
			::v-deep .u-tabs {
				background-color: #fff;
			}
			.tab_box {
				padding: 16rpx;
				box-sizing: border-box;
				.store_box {
					background-color: #fff;
					border-radius: 16rpx;
					padding: 32rpx;
					margin-bottom: 16rpx;
					
					.info_box {
						.line_1 {
							display: flex;
							align-items: center;
							margin-bottom: 32rpx;
							.avatar {
								width: 112rpx;
								height: 112rpx;
							}
							.info {
								margin-left: 32rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.store_name {
									font-size: 36rpx;
									font-weight: 500;
									color: #333333;
									margin-bottom: 16rpx
								}
                .tags {
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-end;
                  .tag {
                    width: auto;
                    padding: 0 8rpx;
                    border-radius: 8rpx;
                    border: 2rpx solid #0E9589;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  .active {
                    color: #0E9589;
                    border-color: #0E9589;
                  }
                  .stop {
                    color: #F9A006;
                    border-color: #F9A006;
                  }
                  .invalid {
                    color: #999999;
                    border-color: #999999;
                  }
                }
							}
						}
						.line_2, .line_3 {
							margin-bottom: 32rpx;
							.label {
								font-size: 32rpx;
								font-weight: 400;
								color: #999999;
							}
							.desc {
								font-size: 32rpx;
								font-weight: 400;
								color: #333333;
							}
						}
					}
					.btn_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 32rpx;
						.btn_item {
							font-size: 32rpx;
							font-weight: 400;
						}
						.delete {
							color: #ED4545;
						}
						.edit {
							width: 40%;
							text-align: center;
							color: #0A87FC;
							border-left: 2rpx solid #EEEEEE;
							border-right: 2rpx solid #EEEEEE;
						}
						.detail {
							color: #01756B;
						}
					}
				}
			}
		}
	}
</style>
